<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图</title>
    <!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />-->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../plugins/bootstrap-submenu/css/bootstrap-submenu.min.css"/>
    <link rel="stylesheet" href="../css/search.css"/>
    <link rel="stylesheet" href="../css/amapBox.css"/>
    <link rel="stylesheet" href="../css/aroundbox.css"/>
</head>

<body>
<div class="header">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">PostgreSQL</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <ul class="nav nav-tabs">
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                静态内容 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">关键节点展示</a></li>
                <li><a href="#">关键通道展示</a></li>
            </ul>
        </li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                动态内容 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">京张高铁</a></li>
                <li><a href="#">机场巴士</a></li>
                <li><a href="#">北京市交通路况</a></li>
            </ul>
        </li>
        <li role="presentation" class="active"><a href="#">路径规划</a></li>
        <li role="presentation"><a href="#">班车时刻</a></li>
    </ul>
    <div id="loginbox" class="usel loginbox" style="left: 1850px; top: 15px;">
        <div class="avatar logintip" data-spm-anchor-id="0.0.0.i4.42e51c4e1iVbJz">  </div>
        <div class="user-panel" style="opacity: 0; transform: translateY(0px); display: none;">
            <div class="user-triangle"></div> <div class="user-head">  <div class="login-banner clearfix">
            <div class="text-notice">
                <p>登录后可享受</p> <p>更多贴心服务</p> </div>
            <div class="login-btn">登录</div>
        </div>
        </div>
            <div class="func-list">
                <div class="func-item road-book" data-type="road-book">
                    <i class="iconfont icon-lushu"></i>
                    <span class="text-notice">路书<span class="red-point" style="display: inline;"></span> </span>
                </div>
            </div>
        </div>
        <div class="recommend_entry" id="to_lushu" style="opacity: 0; display: none; transform: translateY(0px);">
            <div class="recom_close"> <i class="iconfont icon-close" data-spm-anchor-id="0.0.0.i0.42e51c4e1iVbJz"></i> </div> </div>
    </div>
</div>
<div class="body">
    <!--搜索模块-->
    <div class="keyword-search">
        <section id="search" class="search">
            <header class="searchbox">
                <img class="usel logo"
                     src=""
                     draggable="false">
                <div id="nearbybox">
                    <div id="nearby">
                        <span>在</span><span class="poiname">天安门...</span><span>周边搜</span>
                        <input type="text" id="nearbyipt" autocomplete="off"/>
                    </div>
                    <div id="nearbyclosewrap">
                        <i id="nearbyclose" class="iconfont icon-close"></i>
                    </div>
                    <div id="nearbybtn">
                        <i class="iconfont icon-search nearbylogo"></i>
                        <span id="nearbyloading" class="ring"></span>
                    </div>
                </div>

                <div class="iptbox">
                    <input type="text" id="searchipt" placeholder="搜索位置、公交站、地铁站" maxlength="256" autocomplete="off"/>

                    <div id="searchbtn" class="usel">
                        <i class="iconfont icon-search searchlogo icontip" title="搜索"></i>

                        <span id="searchloading" class="ring"></span>
                    </div>
                </div>

                <div class="direntry usel">
                    <img class="fa-dir icontip" title="路径规划"
                         src=""
                         draggable="false">
                    <i class="close-btn iconfont icon-close"></i>
                </div>
            </header>
            <div class="amap-search-panctrl">

            </div>
            <div class="dtrigger dragtop"></div>
            <div class="dtrigger dragbottom"></div>
            <div class="dtrigger dragleft"></div>
            <div class="dtrigger dragright"></div>
        </section>
        <section id="amapBox" class="amap-box fs-box" style="display: block; overflow: visible;">
            <div class="translate-box" data-slide-d="0" style="transform: translateY(0px);">
                <section class="tab-c panel-box">
                    <ul class="tab-list panel-box-list clearfix">
                        <li class="index-tab panel-box-tab tab" data-type="/dir" fwd="/dir"><span class="dirico"></span> <span
                                class="nav-txt">路线</span></li>
                        <li class="around-tab panel-box-tab tab cur" data-type="/around" fwd="around"><i
                                class="iconfont icon-search"></i> <span class="nav-txt">热搜</span></li>
                        <li class="faves-tab panel-box-tab tab" data-type="/faves" fwd="faves"><span class="starico"></span>
                            <span class="nav-txt">收藏</span></li>
                        <li class="place-tab panel-box-tab tab" data-type="/place" fwd="place"><span class="starico"></span>
                            <span class="nav-txt">详情</span></li>
                    </ul>
                    <div class="panel-list">
                        <div class="index-panel panel" style="display: none;"></div>
                        <div class="around-panel panel" style="display: block;">
                            <div id="aroundbox" class="around-box real-height-box">
                                <div class="recommend-c clearfix">
                                    <div class="item meishi-item" data-type="search" keyword="机场"
                                         data-spm-anchor-id="0.0.0.i6.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_airport.png"
                                                                data-spm-anchor-id="0.0.0.i2.5fd81c4ehDDuzm"></div>
                                        <p class="name ellipsis">机场</p></div>
                                    <div class="item hotel-item" data-type="search" keyword="火车站">
                                        <div class="img-c"><img src="img/search_train_station.png"></div>
                                        <p class="name ellipsis">火车站</p></div>
                                    <div class="item scenic-item" data-type="search" keyword="汽车站">
                                        <div class="img-c"><img src="img/search_bus_station.png"></div>
                                        <p class="name ellipsis">汽车站</p></div>
                                    <div class="item cinema-item" data-type="search" keyword="服务区"
                                         data-spm-anchor-id="0.0.0.i1.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_service_area.png"></div>
                                        <p class="name ellipsis">服务区</p></div>
                                    <div class="item cinema-item" data-type="search" keyword="比赛场馆"
                                         data-spm-anchor-id="0.0.0.i1.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_stadium.png"></div>
                                        <p class="name ellipsis">比赛场馆</p></div>
                                    <div class="item cinema-item" data-type="search" keyword="运行中心"
                                         data-spm-anchor-id="0.0.0.i1.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_operation_center.png"></div>
                                        <p class="name ellipsis">运行中心</p></div>
                                    <div class="item cinema-item" data-type="search" keyword="媒体中心"
                                         data-spm-anchor-id="0.0.0.i1.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_media.png"></div>
                                        <p class="name ellipsis">媒体中心</p></div>
                                    <div class="item cinema-item" data-type="search" keyword="酒店"
                                         data-spm-anchor-id="0.0.0.i1.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="https://a.amap.com/pc/static/img/search_hotel.png"></div>
                                        <p class="name ellipsis">酒店</p></div>
                                    <div class="item cinema-item" data-type="search" keyword="医院"
                                         data-spm-anchor-id="0.0.0.i1.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_hospital.png"></div>
                                        <p class="name ellipsis">医院</p></div>
                                </div>

                                <div class="recommend-c route clearfix">
                                    <div class="item meishi-item" data-type="search" keyword="铁路"
                                         data-spm-anchor-id="0.0.0.i6.5fd81c4ehDDuzm">
                                        <div class="img-c"><img src="img/search_airport.png"
                                                                data-spm-anchor-id="0.0.0.i2.5fd81c4ehDDuzm"></div>
                                        <p class="name ellipsis">铁路</p></div>
                                    <div class="item hotel-item" data-type="search" keyword="高速/国道/省道">
                                        <div class="img-c"><img src="img/search_train_station.png"></div>
                                        <p class="name ellipsis">高速/国道/省道</p></div>
                                    <div class="item scenic-item" data-type="search" keyword="城区">
                                        <div class="img-c"><img src="img/search_bus_station.png"></div>
                                        <p class="name ellipsis">城区</p></div>
                                </div>
                                <!--<div class="poi-history-c">-->
                                <!--<ul class="poi-history">-->
                                <!--<li class="item" data-id="0"><span class="clock-icon"><i class="iconfont icon-time"></i></span><span-->
                                <!--class="name ellipsis">美食</span><span class="del-item"><i-->
                                <!--class="iconfont icon-delete"></i></span></li>-->
                                <!--<li class="item" data-id="1"><span class="clock-icon"><i class="iconfont icon-time"></i></span><span-->
                                <!--class="name ellipsis">火车站</span><span class="del-item"><i-->
                                <!--class="iconfont icon-delete"></i></span></li>-->
                                <!--<li class="item" data-id="2"><span class="clock-icon"><i class="iconfont icon-time"></i></span><span-->
                                <!--class="name ellipsis">京九线</span><span class="del-item"><i-->
                                <!--class="iconfont icon-delete"></i></span></li>-->
                                <!--<li class="item" data-id="3"><span class="clock-icon"><i class="iconfont icon-time"></i></span><span-->
                                <!--class="name ellipsis">地铁13号线</span><span class="del-item"><i-->
                                <!--class="iconfont icon-delete"></i></span></li>-->
                                <!--</ul>-->
                                <!--<div style="display:none" class="del-all clearfix"><span class="btn">删除所有历史记录</span></div>-->
                                <!--</div>-->
                                <div class="active_banner"></div>

                            </div>
                        </div>
                        <div class="faves-panel panel"></div>
                        <div class="place-panel panel" style="display: block;"></div>
                    </div>
                </section>
            </div>
        </section>
    </div>


    <div id="container" class="map" tabindex="0"></div>
    <!--路径规划输入模块-->
    <div id="dirBox" class="hide">
        <div id="planForm">
            <ul class="tabs dir_tab col3 z-depth-1 clearfix" id="trafficTab">
                <li>
                    <a id="carTab" class="palntype_tab icon-car icondirtip" href="javascript:void(0)" data-type="car"></a>
                </li>
                <li>
                    <a id="busTab" class="palntype_tab icon-bus icondirtip current" href="javascript:void(0)" data-type="bus"></a>
                </li>
                <li>
                    <a id="walkTab" class="palntype_tab icon-walk icondirtip" href="javascript:void(0)" data-type="walk"></a>
                </li>
            </ul>
            <i class="dir_close iconfont icon-close" data-spm-anchor-id="0.0.0.i2.42e51c4eEIOYbj"></i>
            <div class="line-search">
                <div class="line-search-left icon_exchange" id="dir_exchange">
                    <i class="iconfont icon-switchroute"></i>
                </div>
                <div class="line-search-form">
                    <p class="line_serch_ipt line-search-from">
                        <label>起 </label>
                        <input type="text" class="dir_ipt" id="dir_from_ipt" dirtype="from" placeholder="请输入起点" value="" autocomplete="off" data-spm-anchor-id="0.0.0.i8.42e51c4eEIOYbj">
                        <span class="del-item" style="display: none;"></span>
                    </p>
                    <div class="passList"></div>
                    <p class="line_serch_ipt line-search-to">
                        <label>终 </label>
                        <input type="text" class="dir_ipt" id="dir_to_ipt" dirtype="to" placeholder="请输入终点" value="" autocomplete="off">
                        <span class="del-item" style="display: none;"></span>
                    </p>
                    <p class="line-search-submit">
                        <!--<a href="javascript:void(0)" class="line-search-clear none">清除路线</a>-->
                        <a href="javascript:void(0)" class="dir_submit">查询</a>
                        <span class="fa-spin"></span>
                    </p>
                </div>
                <!--<a href="javascript:void(0)" class="line-search-right icon_add" id="via_add"></a>-->
            </div>
        </div>
    </div>
    <div id="pickerBox">
        <div id="poiInfo"></div>
    </div>
    <div id="routeBox">
        <div id="routeInfo"></div>
    </div>

    <div id="layerbox" class="layerbox usel" style="left: 1384px; top: 15px;">
        <div class="tooldragbar tooldragup"></div>
        <div class="tooldragbar tooldragdown"></div>
        <div class="tooldragbar tooldragleft" data-spm-anchor-id="0.0.0.i1.42e51c4e1iVbJz"></div>
        <div class="tooldragbar tooldragright"></div>
        <div id="layerbox_item">
            <div class="show-list">
                <a class="layer_item satellite item " data-type="jingzhanggaotie" href="javascript:void(0)">
                    <span class="icon"> <i class="iconfont icon-satellite"></i> </span>
                    <span class="name">京张高铁</span>
                </a>
                <a class="layer_item wumai item " data-type="jichangbashi" href="javascript:void(0)">
                <span class="icon">
                    <i class="iconfont icon-wumai"></i>
                </span>
                    <span class="name">机场巴士</span>
                </a>
                <a class="layer_item traffic item " data-type="traffic" href="javascript:void(0)">
                <span class="icon">
                    <i class="iconfont icon-traffic"></i>
                </span>
                    <span class="name">北京市交通路况</span>
                </a>
            </div>
            <div class="roadnet usel" id="roadnet">
                <div class="raod_item"> <span class="roadnet_select_icon icon checked"></span>
                    <span class="name">路网</span> </div>
            </div>

        </div>
    </div>



    <div class="input-card" style="width:24rem;">
        <h4>设置地图当前行政区</h4>
        <div class="input-item">
            <input id='city-name' placeholder="北京市" type="text" style="margin-right:1rem;">
            <button class="btn" id="query">去指定城市</button>
        </div>
        <div class="input-item">
            <button class="btn" id="lukaung-btn">显示实时路况</button>
        </div>
    </div>
</div>


<script type="text/javascript"
        src='https://webapi.amap.com/maps?v=1.4.15&key=dcfd6955a1af7e5eda471cd4bf631724&plugin=AMap.Autocomplete&plugin=AMap.CitySearch&plugin=AMap.Driving&plugin=AMap.Transfer&plugin=AMap.Walking'></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<!-- UI组件库 1.0 -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="../plugins/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../plugins/bootstrap/js/bootstrap4.min.js"></script>
<script type="text/javascript" src="../plugins/bootstrap-submenu/js/bootstrap-submenu.min.js"></script>
<script type="text/javascript" src="../plugins/bootstrap-submenu/js/bootstrap-hover-dropdown.min.js"></script>
<script type="text/javascript" src="../js/search.js"></script>

</body>

</html>